<template>
   <header>
      <span class="fa  fa-angle-left back"></span>
      <div class="search">
        <i class="fa  fa-search"></i>
        <input type="text" placeholder="请输入城市/景点/游玩" >
      </div>
      <router-link tag="span" to="/city" class="city">{{$store.state.currentCity}}<i class="fa fa-caret-down"></i></router-link>
    </header>
</template>

<script>
export default {
  
}
</script>

<style lang="less" scoped>
 header{
      width: 100%;
      height: 42/16rem;
      display: flex;
      background: #00bcd4;
      position: relative;
      .fa-angle-left{
        color: #fff;
        font-size: 20/16rem
      }
      .back{
        float: left;
        line-height: 42/16rem;;
        width: 30/16rem;
        text-align: center
      }
      .search{
        -webkit-box-flex: 1;
        flex: 1;
        position: relative;
        input{
          width: 100%;
          border-radius: 5px;
          border:none;
          outline: none;
          line-height: 30/16rem;
          top:5/16rem;
          position: relative;
          text-indent:38/16rem;
          font-size: 13/16rem
        }
        input::-webkit-input-placeholder{
            color:#ccc;
        }
        i{
          position: absolute;
          left: 15/16rem;
          z-index: 2;
          top:13/16rem;
           color:#ccc;
           font-size: 14/16rem
        }
      }
      .city{
        float:right;
        padding:0 0.75rem;
        line-height: 42/16rem;
        text-align: center;
        display: block;
       
        font-size: 14/16rem;
        color: #fff;
        .fa-caret-down{
          margin-left: 5/16rem;
          font-size: 16/16rem
        }
      }
    }
</style>